<template>
  <h1>我是购物车</h1>
  全选 <input type="checkbox" :checked="isAllSelect" @change="AllSelectChange"> 

    <div v-for="(item,index) in list" :key="item.name" style="list-style: none;">
      <input type="checkbox" @click="SelectChange(index)" :checked="item.Select"> --- 商品名:{{ item.name }} --- 商品价格:{{ item.commodityPrice }} --- <button @click="add(1,index)">+</button> {{ item.num || 1 }} <button @click="add(-1,index)">-</button> --- 小计: {{ (item.num || 1)*item.commodityPrice }}
    </div>
  总计:{{ list.filter((item) => item.Select).reduce((total,item)=>total+=((item.num||1)*item.commodityPrice),0) }}
</template>


<script>
export default {
  // 专门储存响应式数据
  data () {
    return {
      list:[
        {
          name:'羊肉串',
          commodityPrice: 18 ,
          num: 10
        },
        {
          name:'猪肉串',
          commodityPrice: 20 ,
          num: 1
        },
        {
          name:'鸡翅',
          commodityPrice: 5 ,
          num: 1
        }
      ],
      isAllSelect:false
    }
  },
  // 专门储存 事件函数
  methods:{
    // + -
    add(actionType,index){
      // num++  //报错找不到num
      // 这里面要用this
      // console.log(this.list[index].num)
      this.list[index].num = this.list[index].num || 1
      this.list[index].num += actionType
    },

    // 监听全选
    AllSelectChange(){
      // 点击之后取反他的状态(拿到这个状态是为了给每一个单选框渲染)
      this.isAllSelect = !this.isAllSelect
      // 循环遍历数组给每一个单选框渲染
      this.list.forEach( item => {
        item.Select = this.isAllSelect
        // console.log(item)
      })
    },

    // 监听单选
    SelectChange(index){
      // 更新当前单选商品的状态
      this.list[index].Select = !this.list[index].Select
      /*
        使用 every 方法 循环数组 如果有一个select为false
        整个结果为false  全部 为 true 整个结果为true
        和我们单选联动 全选逻辑一致
        直接使用返回值 赋值 给 全选状态
      */
      this.isAllSelect = this.list.every(item => item.Select)
    }
  }
}
</script>